<!-- 销售开单统计 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<view class="layout">
			<u-scroll-list :indicator="false" class="p-b-0">
				<view class="top-view p-t-20">
					<view class="flex flex-sa f-35 m-b-10">
						<view class="f-35">
							<view class="flex flex-c f-32 text-color"> 总匹数 </view>
							<view class="flex flex-c f-30 m-b-10"> {{ footerTotal.totalPiecesCount || 0 }} </view>
						</view>
						<view class="f-35">
							<view class="flex flex-c f-32 text-color"> 总数量 </view>
							<view class="flex flex-c f-30 m-b-10"> {{ footerTotal.totalQuantity || 0 }} </view>
						</view>
						<view class="f-35">
							<view class="flex flex-c f-32 text-color"> 总金额 </view>
							<view class="flex flex-c f-30 m-b-10"> {{ footerTotal.totalPrice || 0 }} </view>
						</view>
					</view>
				</view>
			</u-scroll-list>
			<u-sticky offset-top="0">
				<c-time @hasPage="getHasPage" @success="timeSuccess">
					<view class="flex s-content" slot="content">
						<view class="check-account flex flex-dlii  select-item"
							@click="goRoute(billId.data.name, 1, 'pages/application/pages/cloth/sales-statistics/product-index')"
							:class="{ 'marginLeft': !haspage }">
							<text class="grey p-r-10">{{ billId.data.name || '选产品' }}</text>
							<u-icon v-if="!billId.data.name" name="arrow-down-fill" color="#ccc" size="10"></u-icon>
							<text class="c-99" v-else>x</text>

						</view>
						<view class="check-account flex flex-dlii select-item"
							@click="goRoute(billId.data.keywords, 2, 'pages/application/pages/cloth/sales-ticket/index?page=return&type=return')">
							<text class="grey p-r-10">{{ billId.data.keywords || '选客户' }}</text>
							<u-icon v-if="!billId.data.keywords" name="arrow-down-fill" color="#ccc" size="10"></u-icon>
							<text class="c-99" v-else>x</text>
						</view>
					</view>
				</c-time>
			</u-sticky>
			<view class="list-view" @click="detail(item)" v-for="(item, index) in indexList" :key="index">
				<view class="dl-view">
					<view class="dt-view flex">
						<view class="name">
							{{ item.comegoName }}
						</view>
						<view class="user flex">
							<text class="grey m-r-10">{{ item.businessTime }}</text>
							<text class="grey m-r-10">管理员</text>
							<!-- <view class="status">{{ item.auditState ? '已审核' : '未审核' }}</view> -->
							<text class="blue m-r-10" v-if="item.isCancel">已作废</text>
							<text class="red m-r-10" v-if="item.auditState == false && item.isCancel == false">未审核</text>
							<text class="green m-r-10" v-if="item.auditState == true && item.isCancel == false">已审核</text>
						</view>
					</view>
					<view class="dd-view flex">
						<view class="all-view">
							<text class="grey m-r-10">共</text><text>{{ item.totalPiecesCount }}匹</text><text>{{
								item.quantity
							}}米</text>
						</view>
						<view class="pay-view">
							<text class="grey m-r-10">应收</text>
							<text class="red">￥{{ item.totalPrice || '暂无金额' }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="fixed-btn border-top">
				<view class="btn-con flex">
					<u-button type="primary"
						@click="goRouteDocument('/pages/application/pages/personnel/supplier/supplier?type=cgdreturn&page=cgdreturn')"
						shape="circle" text="新增退货单" color="#999" class="m-r-20"></u-button>
					<u-button type="primary"
						@click="goRouteDocument('/pages/application/pages/personnel/supplier/supplier?type=cgd&page=cgd')"
						shape="circle" text="新增来货单"
						color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"></u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import cTime from '@/pages/application/pages/finance/accounts-receivable-payable/components/time.vue'
import { getlist, getSaleReturnlist } from "@/apis/bill/purchase-return";
export default {
	name: '',
	components: {
		cTime
	},
	data() {
		return {
			config: {
				title: "来退货结算",
				color: "#ffffff",
				//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				rightButton: [
					{
						key: "btn1",
						icon: "&#xe888;",
						position: "left",
					},
				],
			},
			haspage: true,
			pages: {
				current: 1,
				size: 20,
			},
			billId: {
				data: {
					"isCancel": false,
					"beginTime": null, // 开始事件
					"endTime": null, // 结束时间
					"keywords": "", // 客户
					"spuId": "", //产品spuId
					"code": "",//产品code
					"name": ""//name

				},
				page: {
					current: 1,
					size: 20,
					sort: "",
					order: "desc",
					total: 0,
					orders: [
						{
							column: "business_time",
							asc: false,
						},
					],
				},
			},
			footerTotal: {
				"priceQuantity": 0,
				"piecesCount": 0,
				"quantity": 0,
				"totalPrice": 0
			},
			indexList: [],
			productPage: null
		}
	},
	onLoad(info) {
		this.productPage = info.page;
		console.log("cgdreturn", this.productPage);
		this.initData()

	},
	onShow() {
		// 产品
		uni.$on('salesStatisticsProduct', data => {
			this.billId.data.name = data.name
			this.billId.data.code = data.code
			this.billId.data.spuId = data.spuId
			uni.$off('salesStatisticsProduct')
			this.indexList = []
			this.initData()
		})
		// 客户
		uni.$on('on-sales-ticket', data => {
			this.billId.data.keywords = data.name
			uni.$off('on-sales-ticket')
			this.indexList = []
			this.initData()
		})

	},
	beforeDestroy() {
		uni.$off('salesStatisticsProduct')
		uni.$off('on-sales-ticket')
	},
	methods: {
		// 查看详情
		detail(item) {
			this.$ls.remove('cgdInformation')
			this.$ls.remove('cgdreturnInformation')
			if (this.productPage == 'cgd') {
				uni.redirectTo({
					url: `/pages/application/pages/cloth/procure/settlement/index?id=${item.id}&type=details`
				})
			} else if (this.productPage == 'cgdreturn') {
				uni.redirectTo({
					url: `/pages/application/pages/cloth/procure/settlement/cgd-return?id=${item.id}&type=details`
				})
			}

		},
		// 跳转到销售单和退货单
		goRouteDocument(item) {
			if (!item) {
				this.$refs.uToast.show({
					type: 'default',
					message: '正在开发中',
				})
				return
			}
			// 先清除在产页面等
			this.$ls.remove('cgdInformation')
			this.$ls.remove('cgdreturnInformation')
			this.$Router.push({
				path: item,
			});
		},
		// 路由跳转
		goRoute(item, index, url) {
			if (item) {
				if (index == 1) {
					this.billId.data.name = ''
					this.billId.data.code = ''
					this.billId.data.spuId = ''
				} else if (index == 2) {
					this.billId.data.keywords = ''
				}
				this.indexList = []
				this.initData()
			} else {
				uni.navigateTo({
					url: url
				})
			}

		},
		// 获取时间参数
		timeSuccess(val, item) {
			console.log("timeSuccess", val, item);

		},
		// 获取数据
		initData() {
			// 1. 查询列表信息
			console.log("cgd", this.productPage);
			if (this.productPage == 'cgd') {
				getlist(this.billId).then((res) => {
					if (!res.flag) return;
					const data = res.data || {};
					this.footerTotal = data.footerTotal
					if (this.pages.current == 1) {
						this.indexList = data.page.records;
					} else {
						this.indexList = [...data.page.records, ...this.indexList];
					}
				});
			} else if (this.productPage == 'cgdreturn') {
				getSaleReturnlist(this.billId).then((res) => {
					if (!res.flag) return;
					const data = res.data || {};
					this.footerTotal = data.footerTotal
					if (this.pages.current == 1) {
						this.indexList = data.page.records;
					} else {
						this.indexList = [...data.page.records, ...this.indexList];
					}
				});
			}
		},
		clickBtn(item) {
			if (item.key === "btn1") {
				this.show = true
			}
		},
		getHasPage(val) {
			console.log(val)
			this.haspage = val
		}
	}
}
</script>

<style lang="scss" scoped>
.top-view {
	flex: 1;
	background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
	color: #fff;
}

.s-content {
	flex: 1;
	justify-content: space-between;
	// padding-left: 20%;
	padding-right: 10rpx;
}

.border-top {
	border-top: 1rpx solid #ddd;
}

.list-view {
	padding: 10rpx 20rpx;

	.dl-view {
		background-color: #fff;
		box-shadow: 4rpx 4rpx 10rpx #ddd;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;

		.dt-view {
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.name {
				font-size: 30rpx;
				font-weight: 700;
			}

			.user {
				font-size: 24rpx;
				align-items: center;
			}

			.status {
				background-color: #eee;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
			}
		}

		.dd-view {
			justify-content: space-between;
			font-size: 24rpx;
		}
	}
}

.marginLeft {
	margin-left: 20%;
}
</style>